<?php

require_once('db.php');
$result = fetchAll('products',"`parent_id`='0'","`id`,`name`");
?>

Main Category:
<select name="" id="mainCat"data-id="1">
  <option value="">-SELECT-</option>
<?php
  while($ans = mysql_fetch_assoc($result)) {
pr($ans);
    echo '<option value="'.$ans['id'].'">'.$ans['name'].'</option>';
  }
?>
</select>
<hr>
Sub Category 1:
<select name="subCat1" data-id="2"  id="subCatId1">
  <option value="">-SELECT-</option>
</select>
<span id="loader1"></span>
<hr>
Sub Category 2:
<select name="subCat2" id="subCatId2">
  <option value="">-SELECT-</option>
</select>
<span id="loader2"></span>

<!------Jquery Start----------->
<script src="jquery-1.10.2.js" type="text/javascript"></script>

<script type="text/javascript">
  $(document).ready(function(){
    $('select#mainCat , select#subCatId1').on('change',function(){
      var val = this.value;
      var pos = $(this).data('id');
     // alert(pos);
if(pos==1){
  var blankSelect = '<option value="">-SELECT-</option>';
   $('#subCatId1').html(blankSelect);
   $('#subCatId2').html(blankSelect);
}
      $.ajax({
        url:'response.php',
        data:{'id':val},
        type:'POST',
        dataType:'json',
        beforeSend:function(){
          $('#loader'+pos).html('<img src="loader.gif">');
        },
        success :function(data){
          var select = '<option value="">-SELECT-</option>';
          $.each(data,function(i,j){
console.log(j.id+'=='+j.name);
select += '<option value="'+j.id+'">'+j.name+'</option>';
          })

 $('#subCatId'+pos).html(select);
        },
        complete:function(){
          $('#loader'+pos).html('');
        },
      })
    });
  });
</script>
<!------Jquery End----------->

<?php
require_once('footer.php');

